<template>
	<view class="page">

		<!-- 支付状态区域 -->
		<view class="status-card">
			<view class="status-header">
				<text class="status-title" v-if="orderInfo.pay_status == 0">待支付</text>
				<text class="status-title" v-if="orderInfo.pay_status == 1">已支付</text>
				<text class="status-title" v-if="orderInfo.pay_status == 2">已取消</text>
				<view class="countdown">
					<uni-icons type="clock" size="20" color="#FF6B00"></uni-icons>
					<!-- <text class="countdown-text">44:22</text> -->
				</view>
			</view>
			<view class="status-desc">支付成功后房间将为您保留整晚</view>
			<view class="status-buttons">
				<button class="primary-btn" v-if="orderInfo.pay_status == 0" @click="payLKLPayFun">去支付</button>
				<button class="secondary-btn" v-if="orderInfo.pay_status != 2" @click="orderCancelFun">取消订单</button>
			</view>
			<view class="cancel-notice">
				<uni-icons type="checkbox" size="16" color="#FF6B00"></uni-icons>
				<text class="notice-text">{{ getDateTimeMonthDayZH(orderInfo.start_time) }} 18:00前可免费取消</text>
			</view>
		</view>

		<!-- 酒店信息卡片 -->
		<view class="hotel-card">
			<view class="hotel-info">
				<image class="hotel-image" :src="orderInfo.hotelInfo.cover" mode="aspectFill"></image>
				<view class="hotel-detail">
					<text class="hotel-name">{{ orderInfo.hotelInfo.title }}</text>
					<text class="hotel-address">{{ orderInfo.hotelInfo.address }}</text>
					<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
				</view>
			</view>
			<view class="hotel-actions">
				<view class="action-btn" @click="getSite">
					<uni-icons type="location" size="20" color="#FF6B00"></uni-icons>
					<text>地图/导航</text>
				</view>
				<view class="action-btn" @click="getPhone">
					<uni-icons type="phone" size="20" color="#FF6B00"></uni-icons>
					<text>联系酒店</text>
				</view>
			</view>
		</view>

		<!-- 预订信息卡片 -->
		<view class="booking-card">
			<view class="booking-header">
				<view class="price-info">
					<text class="price-label">预订金额</text>
					<text class="price-value">¥{{ orderInfo.order_amount }}</text>
				</view>
				<!-- <view class="price-detail cursor-pointer">
					<text>费用明细</text>
					<uni-icons type="right" size="16" color="#FF6B00"></uni-icons>
				</view> -->
			</view>
			<view class="date-info">
				<text class="check-in">{{ getDateTimeMonthDayZHWeek(orderInfo.start_time) }}</text>
				<view class="stay-info">
					<text>{{ orderInfo.number }}间·1晚</text>
				</view>
				<text class="check-out">{{ getDateTimeMonthDayZHWeek(orderInfo.end_time) }}</text>
			</view>
			<view class="room-type cursor-pointer">
				<text>{{ orderInfo.roomInfo.name }}</text>
				<!-- <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons> -->
			</view>
		</view>
		<!-- 订单信息卡片 -->
		<view class="order-card">
			<view class="card-title">订单信息</view>
			<view class="order-info">
				<view class="info-item">
					<text class="item-label">订单号</text>
					<text class="item-value">{{ orderInfo.sn }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">下单日期</text>
					<text class="item-value">{{ orderInfo.create_date }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">备注信息</text>
					<text class="item-value">无</text>
				</view>
				<view class="info-item">
					<text class="item-label">联系人</text>
					<text class="item-value">{{ orderInfo.name }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">联系电话</text>
					<text class="item-value">{{ orderInfo.phone }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, toRaw } from "vue";
	import { onShow, onLoad } from '@dcloudio/uni-app';
	import { getOrderDetail, orderCancel, payLKLPay, jsConfig } from '@/utils/apiPost.js';
	import { getDateTimeMonthDayZH, getDateTimeMonthDayZHWeek } from '@/utils/time.js';
	import { safeInvokeWechatPay } from '@/utils/pay.js'
	import WechatSDK from '@/utils/wechat_sdk.js';
	import wx from 'weixin-js-sdk';
	const hotelImage = ref(
		"https://readdy.ai/api/search-image?query=Modern hotel building exterior at night, contemporary architecture, illuminated facade, glass and steel structure, urban setting, professional photography, clear view, centered composition, isolated building, dark sky background&width=400&height=400&seq=1&orientation=squarish&flag=b227920b4419af8e8748e114b7405f47",
	);
	interface orderInfoObj {
		create_date?: string,
		create_time?: string,
		end_date?: string,
		end_time?: number,
		hotelInfo?: {
			cover: string,
			id: number,
			title: string,
			address: string,
			phone: string,
			latitude: string,
			longitude: string
		},
		hotel_id?: number,
		id?: number,
		name?: string,
		number?: number,
		order_amount?: string,
		pay_status?: number,
		phone?: string,
		refund_status?: number,
		roomInfo?: {
			cover: string,
			id: number,
			name: string,
		},
		room_id?: number,
		sn?: string,
		start_date?: string,
		start_time?: number,
		status?: number,
		user_id?: number,
	}
	const orderInfo = ref<orderInfoObj>()
	orderInfo.value = {
		create_date: "25年04月01日 14:47:19",
		create_time: "2025-04-01 14:47:19",
		end_date: "25/04/02",
		end_time: 1743523200,
		hotelInfo: {
			address: "天津市红桥区中保财富中心",
			cover: "http://hotel.shengxuankj.com/resource/image/adminapi/default/banner001.png",
			id: 1,
			phone: "15116908287",
			title: "如家",
			latitude: "39.22624",
			longitude: "117.14319"
		},
		hotel_id: 1,
		id: 7,
		name: "1",
		number: 1,
		order_amount: "5.00",
		pay_status: 0,
		phone: "1",
		refund_status: 0,
		roomInfo: {
			cover: "http://hotel.shengxuankj.com/resource/image/adminapi/default/banner001.png",
			id: 1,
			name: "单人标间",
		},
		room_id: 1,
		sn: "2230303366171328512",
		start_date: "25/04/01",
		start_time: 1743436800,
		status: 1,
		user_id: 3,
	}
	const orderId = ref<number>(1)
	const getOrderDetailFun = () => {
		let obj = {
			id: orderId.value
		}
		console.log(obj)
		getOrderDetail(obj).then(res=>{
			console.log(res)
			if(res.code == 1){
				orderInfo.value = res.data
				console.log('orderInfo.value==============================',toRaw(orderInfo.value))
			}
		}).catch(error=>{
			console.log(error)
		})
	}
	const payLKLPayFun = () => {
		
		
		
		
			
		let payObj = {
			order_id: orderId.value
		}
		payLKLPay(payObj).then(payRes=>{
			console.log(payRes)
			if(payRes.code == 1){
				uni.showLoading({
					title: '加载中……',
					mask: true
				})
				
				wx.config({
				  debug: false,
				  appId: payRes.data.appId,
				  timestamp: payRes.data.timeStamp || "",
				  nonceStr: payRes.data.nonceStr || "",
				  signature: payRes.data.paySign || "",
				  jsApiList: [
					'chooseWXPay',         // 微信支付
					'updateAppMessageShareData', // 分享到朋友圈
					'updateTimelineShareData',    // 分享给朋友
					'getLocation', // 获取位置
					'openLocation'
						  // 其他需要调用的API
				  ]
				});
				wx.ready(() => {
					uni.hideLoading()
					wx.chooseWXPay({
					  timestamp: payRes.data.timeStamp,
					  nonceStr: payRes.data.nonceStr,
					  package: payRes.data.package,
					  signType: payRes.data.signType,
					  paySign: payRes.data.paySign,
					  success: (WXPayres) => {
						  console.log('支付成功')
						  uni.showToast({
							title: `支付成功${JSON.stringify(WXPayres)}`,
							duration: 1000
						  })
					  },
					  fail: (WXPayerror) => {
						  uni.showToast({
							title: `支付失败${JSON.stringify(WXPayerror)}`,
							duration: 1000
						  })
					  }
					});
				});
			}
		})					
	}
	const orderCancelFun = () => {
		let obj = {
			order_id: orderId.value
		}
		orderCancel(obj).then(res=>{
			console.log(res)
		}).catch(error=>{
			console.log(error)
		})
	}
	const getSite = () => {
		console.log(window.location.href)
		jsConfig({url: window.location.href}).then(res=>{
			return new Promise((resolve, reject) => {
			  wx.config({
			    debug: false,
			    appId: res.data.appId,
			    timestamp: res.data.timestamp.toString() || "",
			    nonceStr: res.data.nonceStr || "",
			    signature: res.data.signature || "",
			    jsApiList: res.data.jsApiList
			  });
			
			  wx.ready(() => {
			    resolve(wx);
				console.log('初始化完成', wx)
					const latitude = Number(orderInfo.value.hotelInfo.latitude)
					const longitude = Number(orderInfo.value.hotelInfo.longitude)
					console.log(latitude, longitude)
					wx.openLocation({
						latitude,
						longitude,
						scale: 18,
						name: "",
						address: "",
						infoUrl: ""
					})
				});
			
			  wx.error(err => {
			    reject(err);
			  });
			});
		}).catch(error=>{
			console.log(error)
		})
		// jsConfig({url: 'http://hotel.shengxuankj.com/web/pages/hotel-detail/hotel-detail'}).then(res=>{
		// 	console.log('11111111111111',res)
		// 	return new Promise((resolve, reject) => {
		// 	  wx.config({
		// 	    debug: false,
		// 	    appId: res.data.appId,
		// 	    timestamp: res.data.timestamp || "",
		// 	    nonceStr: res.data.nonceStr || "",
		// 	    signature: res.data.signature || "",
		// 	    jsApiList: res.data.jsApiList
		// 	  });
			
		// 	  wx.ready(() => {
		// 	    resolve(wx);
		// 		console.log('初始化完成')
		// 		wx.getLocation({
		// 		 type: 'gcj02', //返回可以用于wx.openLocation的经纬度
		// 		 success (result) {
		// 			 console.log('=================',result)
		// 		   const latitude = result.latitude
		// 		   const longitude = result.longitude
		// 		   wx.openLocation({
		// 		     latitude,
		// 		     longitude,
		// 		     scale: 18
		// 		   })
		// 		 }
		// 		})
		// 	  });
			
		// 	  wx.error(err => {
		// 	    reject(err);
		// 	  });
		// 	});
		// }).catch(error=>{
		// 	console.log(error)
		// })
		
	} 
	const getPhone = () => {
		uni.makePhoneCall({
			phoneNumber: "13803476500"
		})
	}
	onLoad((options)=>{
		console.log(options)
		orderId.value = Number(options.id)
		getOrderDetailFun()
	})
</script>

<style scoped>
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.page {
		min-height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		height: 88rpx;
		margin: -20rpx -20rpx 20rpx -20rpx;
		background-color: #ffffff;
	}

	.nav-left {
		width: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}

	.nav-right {
		display: flex;
		align-items: center;
		padding-right: 20rpx;
	}

	.mr-20 {
		margin-right: 20rpx;
	}

	.status-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 40rpx;
		margin-bottom: 20rpx;
	}

	.status-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.status-title {
		font-size: 48rpx;
		font-weight: bold;
		color: #333333;
	}

	.countdown {
		display: flex;
		align-items: center;
	}

	.countdown-text {
		margin-left: 10rpx;
		color: #ff6b00;
		font-size: 40rpx;
		font-weight: bold;
	}

	.status-desc {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 40rpx;
	}

	.status-buttons {
		display: flex;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.primary-btn {
		flex: 1;
		background-color: #ff6b00;
		color: #ffffff;
		font-size: 32rpx;
	}

	.secondary-btn {
		flex: 1;
		background-color: #ffffff;
		color: #333333;
		border: 2rpx solid #cccccc;
		font-size: 32rpx;
	}

	.cancel-notice {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.notice-text {
		font-size: 28rpx;
		color: #ff6b00;
	}

	.hotel-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.hotel-info {
		display: flex;
		margin-bottom: 30rpx;
	}

	.hotel-image {
		width: 144rpx;
		height: 144rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.hotel-detail {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.hotel-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.hotel-address {
		font-size: 28rpx;
		color: #666666;
	}

	.hotel-actions {
		display: flex;
		gap: 20rpx;
	}

	.action-btn {
		flex: 1;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		gap: 10rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.booking-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.booking-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.price-info {
		display: flex;
		align-items: baseline;
		gap: 10rpx;
	}

	.price-label {
		font-size: 28rpx;
		color: #333333;
	}

	.price-value {
		font-size: 40rpx;
		color: #ff6b00;
		font-weight: bold;
	}

	.price-detail {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #ff6b00;
	}

	.date-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.check-in,
	.check-out {
		font-size: 28rpx;
		color: #333333;
	}

	.stay-info {
		padding: 8rpx 20rpx;
		background-color: #fff5e6;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #ff6b00;
	}

	.room-type {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
	}

	.order-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 30rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.item-label {
		font-size: 28rpx;
		color: #666666;
	}

	.item-value {
		font-size: 28rpx;
		color: #333333;
	}

	.cursor-pointer {
		cursor: pointer;
	}
</style>